<template>
      <div class="value">
         <el-input :ref="findParamKey(localParamObj)" v-if="localParamObj.type == 'text' && localParamObj.typeValidate=='default'" :disabled="localParamObj.isDisable" type="text" @input="paramValueChange($event,localParamObj)" class="value" size="mini" v-model="localParamObj.userSelection.parameterValue" :placeholder="localParamObj.placeholder"></el-input>

         <el-input :ref="findParamKey(localParamObj)" v-else-if="localParamObj.type == 'text' && localParamObj.typeValidate=='integer'" :disabled="localParamObj.isDisable" type="number" min=0 @input="paramValueChange($event,localParamObj)" class="value" size="mini" v-model="localParamObj.userSelection.parameterValue" placeholder="请输入数字"></el-input>

         <el-input :ref="findParamKey(localParamObj)" v-else-if="localParamObj.type == 'text' && localParamObj.typeValidate=='number'" :disabled="localParamObj.isDisable" type="number" min=0 @input="paramValueChange($event,localParamObj)" class="value" size="mini" v-model="localParamObj.userSelection.parameterValue" placeholder="请输入数字"></el-input>

         <el-input :ref="findParamKey(localParamObj)" v-else-if="localParamObj.type == 'textarea'" type="textarea" :rows="3" @input="paramValueChange($event,localParamObj)" class="value" size="mini" v-model="localParamObj.userSelection.parameterValue" placeholder="请输入内容"></el-input>

         <textSelect :ref="findParamKey(localParamObj)" class="value" v-else-if="localParamObj.type == 'select&text'" :options='localParamObj.options' v-model="localParamObj.userSelection.parameterValue" @input="paramValueChange($event,localParamObj)" ></textSelect>

         <!-- 附件 -->
         <div :ref="findParamKey(localParamObj)" class="value file"  v-else-if="localParamObj.type == 'file'" :style="localParamObj.userSelection.parameterValue=='正在上传...'?'pointer-events:none;':''">
            <el-input type="text" class="value" size="mini" placeholder=""></el-input>
            <div class="fileContent" :class="{has:localParamObj.userSelection.parameterValue.length > 0}" >
                  <label class="name">
                     <div v-text="localParamObj.userSelection.parameterValue.length>0?(localParamObj.userSelection.parameterValue.split('/')[localParamObj.userSelection.parameterValue.split('/').length-1]):'选择文件'">选择文件</div>
                     <input type="file" @change="paramValueChange($event,localParamObj)" placeholder="请输入内容">
                  </label>
                  <div class="close" @click="deleteAttachment(localParamObj)"><i class="el-icon-circle-close"></i></div>
            </div>
         </div>

         <!-- 照片 -->
         <div :ref="findParamKey(localParamObj)" class="value file"  v-else-if="localParamObj.type == 'img'" :style="localParamObj.userSelection.parameterValue=='正在上传...'?'pointer-events:none;':''">
            <el-input type="text" class="value" size="mini" placeholder=""></el-input>
            <div class="fileContent" :class="{has:localParamObj.userSelection.parameterValue.length > 0}" >
                  <label class="name">
                     <div v-text="localParamObj.userSelection.parameterValue.length>0?(localParamObj.userSelection.parameterValue.split('/')[localParamObj.userSelection.parameterValue.split('/').length-1]):'选择文件'">选择照片</div>
                     <input type="file" accept="image/gif, image/png, image/jpeg, image/bmp, image/webp, image/x-icon, image/vnd.microsoft.icon" @change="paramValueChange($event,localParamObj)" placeholder="请输入内容">
                  </label>
                  <div class="close" @click="deleteAttachment(localParamObj)"><i class="el-icon-circle-close"></i></div>
            </div>
         </div>

         <el-select  :ref="findParamKey(localParamObj)" @change="paramValueChange($event,localParamObj)" v-else-if="localParamObj.type == 'select'" class="value" size="mini" :disabled="localParamObj.isDisable"  v-model="localParamObj.userSelection.parameterValue" placeholder="请选择">
            <el-option v-for="oItem in localParamObj.options" :key="oItem.id" :label="oItem.name" :value="oItem.name"></el-option>
         </el-select>

         <el-date-picker :ref="findParamKey(localParamObj)" v-else-if="localParamObj.type == 'date_year'" :default-value="localParamObj.defaultDate" format="yyyy" :picker-options="pickerOptions" value-format='yyyy' type="year" class="value"  size="mini"  @change="paramValueChange($event,localParamObj)" v-model="localParamObj.userSelection.parameterValue" placeholder="选择日期"></el-date-picker>
         <el-date-picker :ref="findParamKey(localParamObj)" v-else-if="localParamObj.type == 'date_month'" :default-value="localParamObj.defaultDate" format="yyyy.MM" :picker-options="pickerOptions" value-format='yyyy.MM' type="month" class="value"  size="mini" @change="paramValueChange($event,localParamObj)" v-model="localParamObj.userSelection.parameterValue" placeholder="选择日期"></el-date-picker>
         <el-date-picker :ref="findParamKey(localParamObj)" v-else-if="localParamObj.type == 'date_day'" :default-value="localParamObj.defaultDate" format="yyyy.MM.dd" :picker-options="pickerOptions" value-format='yyyy.MM.dd' type="date" class="value"  size="mini" @change="paramValueChange($event,localParamObj)" v-model="localParamObj.userSelection.parameterValue" placeholder="选择日期"></el-date-picker>
         
         <div :ref="findParamKey(localParamObj)" v-else-if="localParamObj.type == 'date_month_range'" class="value daterange">
            <el-date-picker type="month" size="mini" prefix-icon="" :picker-options="pickerOptions" :default-value="localParamObj.defaultDate" format="yyyy.MM" value-format='yyyy.MM' v-model="localParamObj.userSelection.startDate" @change="paramValueChange($event,localParamObj,'date_range_start')"  placeholder="开始日期"></el-date-picker>
            <span class="line"></span>
            <el-date-picker type="month" size="mini" :picker-options="pickerOptions" :default-value="localParamObj.defaultDate" format="yyyy.MM" value-format='yyyy.MM' v-model="localParamObj.userSelection.endDate" @change="paramValueChange($event,localParamObj,'date_range_end')"  placeholder="结束日期"></el-date-picker>
         </div>
         <div :ref="findParamKey(localParamObj)" v-else-if="localParamObj.type == 'date_day_range'" class="value daterange">
            <el-date-picker type="date" size="mini" prefix-icon="" :picker-options="pickerOptions" :default-value="localParamObj.defaultDate" format="yyyy.MM.dd" value-format='yyyy.MM.dd' v-model="localParamObj.userSelection.startDate" @change="paramValueChange($event,localParamObj,'date_range_start')"  placeholder="开始日期"></el-date-picker>
            <span class="line"></span>
            <el-date-picker type="date" size="mini" :picker-options="pickerOptions" :default-value="localParamObj.defaultDate" format="yyyy.MM.dd" value-format='yyyy.MM.dd' v-model="localParamObj.userSelection.endDate" @change="paramValueChange($event,localParamObj,'date_range_end')"  placeholder="结束日期"></el-date-picker>
         </div>

         <div v-show="localParamObj.isLevel === '2'" class="operation">
            <i class="iconfont icontianjialiebiaoxiang" @click="$refs.baseInfoSecondary.show(localParamObj,true);"></i>
         </div>

         
         <!-- 二级数据弹框 -->
         <base-info-secondary ref="baseInfoSecondary"></base-info-secondary>

      </div>
</template>

<script>

import { getParamKey,processingAssociatedFields,makeParamKey,findParamByKey } from '@/service/personalInfoDataProcessing'
import textSelect from "./TextSelect";


export default {
   components:{
      textSelect
   },
   props:{
      paramObj:{
         type:Object,   // 属性值类型必须是Object；可选的类型有：String、Number、Object、Array等
         required:true,
      }
   },
   data(){
      return {
         localParamObj:this.paramObj,
      }
   },
   methods:{
      // 公共 - 获取参数key
      findParamKey(param){
         return getParamKey(param);
      },
      paramValueChange(event,param,type1){
         this.$emit('paramValueChange',event,param,type1);
      },
      // 页面字段 - 删除附件
      deleteAttachment(paramObj){

         paramObj.userSelection.parameterValue='';
         this.$emit('deleteAttachment',paramObj);
      },
      // 禁止在数字输入框填写指数e和小数点
      // integerInputLimit(e){
      //    let key = e.key
      //    if (key === '.') {
      //       e.returnValue = false
      //       return false
      //    }
      //    return true
      // },
      // 禁止在数字输入框填写指数e 和 多个小数点
      // numberInputLimit(e){
      //    let key = e.key
      //    if (key === 'e') {
      //       e.returnValue = false
      //       return false
      //    }else if(key === '.' && this.localParamObj.userSelection.parameterValue.indexOf(".") !== -1){
      //       e.returnValue = false
      //       return false
      //    }
      //    return true
      // },
   },
   watch:{
      paramObj(){
         this.localParamObj = this.paramObj;
      }
   },
   computed:{
      // picker-options	当前时间日期选择器特有的选项参考下表
      pickerOptions(){
         let that = this
         return {
            disabledDate(time) {
               let daterange = that.localParamObj.dateRange;
               if(daterange === undefined){
                  return false; // 不使用禁用
               }

               let daterangeArray = daterange.split("-");
               
               let startDate = Date.parse(daterangeArray[0]);
               let endDate = Date.parse(daterangeArray[1]);
               if(isNaN(endDate) === true){
                  // endDate = new Date().getTime();
                  endDate = Number.MAX_SAFE_INTEGER;
               }

               // 禁用日期范围之外的日期选择
               if(time.getTime() < startDate || time.getTime() > endDate){
                  return true; // 禁用
               }

               return false;
            },
         }
      }
   }
}
</script>

<style scoped>

.value{
    width: 60%;
    display:flex;
}
.value>.value{
    flex-grow: 1;
    position: relative;
}
>>> .value.file{
    flex-grow: 1;
    position: relative;
}
>>> .value.file>input[type='text']{
    pointer-events: none;
}
>>> .value.file>.fileContent{
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    left:0px;
    height: 100%;
    width: 100%;
    padding: 0px 6px;
}
>>> .value.file>.fileContent>label{
    display: flex;
    align-items: center;
}
>>> .value.file>.fileContent input[type='file']{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    opacity: 0;
    cursor: pointer;
    z-index: -1;
}
>>> .value.file>.fileContent>.name{
    flex-grow: 1;
    cursor: pointer;
    color: gray;
    position: relative;
    overflow: hidden;
}
>>> .value.file>.fileContent>.name>div{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
>>> .value.file>.fileContent>.close{
    display: flex;
    cursor: pointer;
    display: none;
    color: red;
    font-size: 16px;
    margin-top: 6px;
}
>>> .value.file>.fileContent.has>.name{
    color: #333;
}
>>> .value.file>.fileContent.has>.close{
    display: block;
}
.value>.operation{
    white-space: nowrap;
    display: flex;
    align-items: center;
    margin-left: 4px;
}
.value>.operation i{
    font-size: 18px;
    cursor: pointer;
    color: #6f8bef;
}
.value>.operation i:hover{
    color: #31478F;
}
.value>.operation.disabled i{
    color: #b1b1b1;
    cursor: default;
    pointer-events: none;
}


.value>.value.daterange{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}
.value>.value.daterange>.line{
    width: 10px;
    height: 1px;
    background: #d2d2d2;
}



</style>